<script setup>
import {ref, defineEmits} from 'vue'
import StepTitleDescription from '@/components/common/StepTitleDescription.vue'
import ThreeImages from '@/components/common/ThreeImages.vue'

const stepTitleDescription = ref({
  title: 'Step 7',
  description: 'What kind of finished length would you like for your drapes?',
})

const emit = defineEmits(['selected'])

const draperyLengthFloor = ref([
  {
    'title':'1 INCH ABOVE FLOOR',
    'description':'',
    'image':'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A13.svg?v=1745722010',
  },
  {
    'title':'BREAK ON FLOOR',
    'description':'',
    'image':'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A14.svg?v=1745722052',
  },
  {
    'title':'SLIGHT PUDDLE ON FLOOR',
    'description':'',
    'image':'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A15.svg?v=1745722089',
  },
])

const selected = (selected) => {
   emit('calculate', selected)
   btnVisible.value = true
}

const btnVisible = ref(false)

</script>

<template>

  <StepTitleDescription :title-and-description="stepTitleDescription" />
  <ThreeImages :curtain-styles="draperyLengthFloor" @selected="selected" />
  <div class="buttonRow">
    <button v-if="btnVisible" type="button" @click="calculate">CALCULATE</button>
  </div>


</template>

<style scoped>

.buttonRow {
  width:100%;
  display: flex;
  justify-content: center;
}

button {
  border:none;
  outline:none;
  padding:10px;
  background-color:black;
  color:white;
  display: flex;
  width:250px;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
}

</style>